<template>
  <div id="supplies">
    <Filters
      block
      :form="searchForm"
      :filterData="filterData"
      @confirm="changePage(1)"
    />
    <div class="container">
      <DataTable rowKey="checkDetailId" :tableData="Data" :btns="btns" :tableColumn="tableColumn" :pageConfig="pageConfig" @refresh="getList">
        <template #sendBias="{row}">
          <span :class="{red: row.sendBias < 0}">{{row.sendBias}}</span>
        </template>
        <template #checkBias="{row}">
          <span :class="{red: row.checkBias < 0}">{{row.checkBias}}</span>
        </template>
      </DataTable>
    </div>
  </div>
</template>
<script lang='ts'>
import { ANALYSIS_EXPORTANALYSIS } from '@/api/global'
import { Component, Watch, Vue } from 'vue-property-decorator'

@Component
export default class supplies extends Vue {
  searchForm: any = {
    word: ''
  }
  get filterData () {
    return {
      word: {
        label: '物资编码/名称',
        type: 'input',
        template: {
          placeholder: '请输入物资编码/名称',
          clearable: true
        }
      }
    }
  }
  Data: any[] = []
  tableColumn: any = {
    materialsNum: {
      label: '材料编码',
      width: 120
    },
    materialsName: {
      label: '材料名称',
      width: 120
    },
    spec: {
      label: '规格',
      width: 100
    },
    modelType: {
      label: '型号',
      width: 100
    },
    unit: {
      label: '单位',
      width: 100
    },
    orderCount: {
      label: '订单量',
      type: 'router',
      path: '/acceptance/supplies/detail',
      query: {
        _alias: 'detail',
        materialsNum: '',
        materialsName: '',
        spec: '',
        modelType: '',
        detailType: '订单量'
      },
      width: 100
    },
    sendCount: {
      label: '送货量',
      type: 'router',
      path: '/acceptance/supplies/detail',
      query: {
        _alias: 'detail',
        materialsNum: '',
        materialsName: '',
        spec: '',
        modelType: '',
        detailType: '送货量'
      },
      width: 100
    },
    checkCount: {
      label: '验收量',
      type: 'router',
      path: '/acceptance/supplies/detail',
      query: {
        _alias: 'detail',
        materialsNum: '',
        materialsName: '',
        spec: '',
        modelType: '',
        detailType: '验收量'
      },
      width: 100
    },
    sendBias: {
      label: '送货偏差',
      width: 100,
      slot: true
    },
    checkBias: {
      label: '验收偏差',
      width: 100,
      slot: true
    }
  }
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  }
  get btns () {
    return [
      {
        label: '导出',
        icon: 'export',
        callback: () =>
          this.$util.exportExcelFun(this.getSearchForm, ANALYSIS_EXPORTANALYSIS)
      }
    ]
  }

  get getSearchForm () {
    return {
      word: this.searchForm.word
    }
  }

  init () {
    this.getList()
  }
  getList () {
    let data = {
      ...this.getSearchForm,
      page: this.pageConfig.current,
      size: this.pageConfig.pageSize
    }
    this.$api.analysisListFetch(data).then((res: any) => {
      this.Data = res.data.records
      this.pageConfig.total = res.data.total
      if (!this.Data.length && this.pageConfig.current > 1) {
        --this.pageConfig.current
        this.getList()
      }
    })
  }
  changePage (val: number) {
    this.pageConfig.current = val
    this.getList()
  }
}
</script>
<style lang='scss' scoped>
.red {
  color: red
}
</style>
